<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <div class="top-card">
      <div class="icon-wrap">
        <img :src="highQuality.coverImgUrl" alt="" />
      </div>
      <div class="content-wrap">
        <div class="tag">精品歌单</div>
        <div class="title">
          {{highQuality.name}}.
        </div>
        <div class="info">
          {{highQuality.description}}
        </div>
      </div>
      <img src="../assets/listCover.jpg" alt="" class="bg" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <!-- active -->
        <span class="item" :class="cat==='全部'?'active':''" @click="cat='全部'">全部</span>
        <span class="item" :class="cat==='欧美'?'active':''" @click="cat='欧美'">欧美</span>
        <span class="item" :class="cat==='华语'?'active':''" @click="cat='华语'">华语</span>
        <span class="item" :class="cat==='流行'?'active':''" @click="cat='流行'">流行</span>
        <span class="item" :class="cat==='说唱'?'active':''" @click="cat='说唱'">说唱</span>
        <span class="item" :class="cat==='摇滚'?'active':''" @click="cat='摇滚'">摇滚</span>
        <span class="item" :class="cat==='民谣'?'active':''" @click="cat='民谣'">民谣</span>
        <span class="item" :class="cat==='电子'?'active':''" @click="cat='电子'">电子</span>
        <span class="item" :class="cat==='轻音乐'?'active':''" @click="cat='轻音乐'">轻音乐</span>
        <span class="item" :class="cat==='影视原声'?'active':''" @click="cat='影视原声'">影视原声</span>
        <span class="item" :class="cat==='ACG'?'active':''" @click="cat='ACG'">ACG</span>
        <span class="item" :class="cat==='怀旧'?'active':''" @click="cat='怀旧'">怀旧</span>
        <span class="item" :class="cat==='治愈'?'active':''" @click="cat='治愈'">治愈</span>
        <span class="item" :class="cat==='旅行'?'active':''" @click="cat='旅行'">旅行</span>
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item" v-for="(song,index) in playList" :key="index">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{song.playCount}}</span>
              </div>
              <img :src="song.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{song.description}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="20"
    >
    </el-pagination>
  </div>
</template>

<script>
import { request } from "../utils/index.js";
export default {
  name: 'recommend',
  data() {
    return {
      // 总条数
      total:0,
      // 页码
      page:1,
      //歌单的标签
      cat: '全部',
      //定义歌单获取的数量
      limit: 20,
      //歌单
      highQuality: {},
      //歌单列表
      playList: [],
    };
  },
  created () {
    //窗体加载获取播放列表
    this.getPlayList();
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.getPlayList();
    },
    async getPlayList(){
      let highquality = await request({
        url: '/top/playlist/highquality',
        method: 'get',
        params:{
          limit: 1,
          cat: this.cat
        }
      })
      this.highQuality = highquality.playlists[0];
      console.log(highquality);

      let playlist = await request({
        url: '/top/playlist/',
        method: 'get',
        params:{
          limit: this.limit,
          offset: (this.page-1)*this.limit,
          cat: this.cat,
        }
      })
      this.playList = playlist.playlists;
      this.total = playlist.total;
      console.log(playlist);
    }
  },
  watch: {
    //监听某个属性的变化,有两个参数
    cat(newValue, oldValue) {
      //console.log(newValue+"----"+oldValue);
      this.getPlayList();
    }
  },
};
</script>

<style >

</style>
